<template>
  <div>
    <div class="header">
      <div class="header-body">
        <img src="http://43.143.0.76:5000/img/user.338ff8e8.svg" alt="" />
        <span class="abc">10400</span>
        <span>访问量</span>
      </div>

      <div class="header-body">
        <img src="http://43.143.0.76:5000/img/message.c960df02.svg" alt="" />
        <span class="abc">10400</span>
        <span>信息</span>
      </div>

      <div class="header-body">
        <img src="http://43.143.0.76:5000/img/monkey.478a4e88.svg" alt="" />
        <span class="abc">10400</span>
        <span>收入</span>
      </div>

      <div class="header-body">
        <img src="http://43.143.0.76:5000/img/shop.05588683.svg" alt="" />
        <span class="abc">10400</span>
        <span>订单</span>
      </div>
    </div>

    <div class="header-chart">
      <div class="left">
        <p class="login">欢迎登录</p>
        <img
          src="http://43.143.0.76:5000/img/tx.0ae553c1.png"
          alt=""
          class="imgs"
        />
      </div>
      <div id="myChart" :style="{ width: '75%', height: '450px' }" />
    </div>
    <!-- <div>{{ this.$store.state.bg }}{{ this.$store.state.color }}</div> -->
  </div>
</template>

<script>
// 引入Echarts
import axios from "axios";
Vue.prototype.axios = axios;
import Vue from "vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

export default {
  mounted() {
    this.drawLine();
  },
  props: ["total"],
  data() {
    return { a: 1000, b: this.total };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['手机', '家电', '衣服', '美妆', '休闲零食', '生活用品', '酒水饮料', ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "上周销量",
            type: "bar",
            data: [
              this.b,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "这周销量",
            type: "bar",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            markPoint: {
              data: [
                { name: "Max", value: 82.2, xAxis: 7, yAxis: 183 },
                { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
/* .header-body {
  height: 60px;
  width: 150px;
  float: left;
  background: #000;
} */
.header {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
/* 上标签 */
.header-body {
  height: 100px;
  width: 250px;
  border: 1px solid white;
  border-radius: 5px;
  background: white;
}

.header-chart {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
/* 登陆样式 */
.header-chart .left {
  height: 400px;
  width: 20%;
  background: skyblue;
  border-radius: 8px;
  margin: 70px 50px 30px -5px;
}
/* echart样式    */
#myChart {
  margin-top: 40px;
  background: white;
}
.imgs {
  height: 200px;
  width: 200px;
  border-radius: 100px;
}
.login {
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
}
</style>
